<template>
	<view class="container">
		<view class="top_tips" @tap="toApplypetDetaile(applicationRecord.id)" v-if=" recordId && userInfo.id">
			<view class="tips_left">
				<view class="tips_hot">{{examineText(applicationRecord.status,applicationRecord.reason).text}}</view>
				<view class="tips_text" v-if="applicationRecord.status != 4">

					{{examineText(applicationRecord.status,applicationRecord.reason).tips}}
				</view>
				<view class="tips_text" v-if="applicationRecord.status == 4">
					{{applicationRecord.applicationInfoReasonFlag == 1? '申请信息不通过;' :''}}{{applicationRecord.payInfoReasonFlag == 1? '打款信息不通过' :''}}
				</view>
			</view>
			<uni-icons type="arrow-right" size="20"></uni-icons>
		</view>
		<view class="studio_info" v-if="studioDetail.name">
			<image class="studio_info_img" :src="studioDetail.avatar" mode=""></image>
			<view class="studio_info_text">
				<view class="studio_info_text_name">{{studioDetail.name}}</view>
				<view class="studio_info_text_tips">成为陪宠师，获得劳务报酬<!-- {{studioDetail.introduce}} --></view>
			</view>
		</view>
		<view class="" v-if="applyPetsitter">
			<mp-html :content='dealHtml(applyPetsitter)'></mp-html>
			<!-- <view v-html="dealHtml(applyPetsitter)"></view> -->
		</view>
		<view class="bottom_box">
			<view class="bottom_tips" @tap="changeAgreement">
				<image :src="url+ (isAgreement?'icon-13.png':'icon-12.png')" mode=""></image>
				<view class="">
					本人已阅读并同意<text @tap.stop="topetTeacherAgreement">《陪宠师服务协议》</text>申请成为陪宠师。
				</view>
			</view>
			<view class="bottom_btn" @tap="applyBtn">申请成为陪宠师</view>
		</view>
		<uni-popup ref="popupApplyCheckRef" type="center" :is-mask-click="false" background-color="#fff"
			border-radius="24rpx 24rpx 24rpx 24rpx">
			<view class="example">
				<view class="example_title">温馨提醒</view>
				<uni-icons @click="popupApplyCheckRef.close()" class="close" type="closeempty" size="28"></uni-icons>
				<!-- <view class="">抱歉，无法再申请陪宠师</view> -->
				<view class="example_title">{{applyCheckDetail.content}}</view>
				<view class="example_btn xjs-btn-primary" @tap="goUrl( Number(applyCheckDetail.type))">
					<text v-if="applyCheckDetail.type == 1">查看我的申请</text>
					<text v-if="applyCheckDetail.type == 2">去我的工作室主页</text>
					<text v-if="applyCheckDetail.type == 3">去我的陪宠师主页</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, onMounted, computed, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { dealHtml, getLocation, formatTime } from '@/hooks/useFunction'
	import api from '@/api'
	import { useUserStoreToRefs } from '@/store/useUserStore'
	const { userInfo, access_token } = useUserStoreToRefs()
	const url = ref('https://xjs-oss-prod.oss-cn-shenzhen.aliyuncs.com/xjs-static/')  //图片前缀
	const applyPetsitter = ref('')
	const studioDetail = ref({})
	const studioId = ref('')
	const popupApplyCheckRef = ref()
	const applyCheckDetail = ref({})
	const applicationRecord = ref({})
	const recordId = ref('')
	const isAgreement = ref<Boolean>(false)//是否同意用户协议
	onLoad((options) => {
		if (options.id) {
			studioId.value = options.id
			getStudio(options.id)
		}

		//applyCheck()
	})
	onShow(() => {
		getApplyPetsitter()
		if (userInfo.value.id) {

			getApplicationRecord()
		}
	})
	const toApplypetDetaile = (id) => {
		uni.navigateTo({
			url: `/pages/myStudio/studio/applyForDetails/index?id=${id}&type=1`
		})
	}
	const examineText = (status, reason) => {
		let text = ''
		let tips = ''
		switch (status) {
			case 0: text = '初审中'
				tips = '陪宠师申请正在初审，请耐心等候'
				break
			case 1: text = '待缴纳'
				tips = '您已通过初审，请上传缴费信息'
				break
			case 2: text = '初审拒绝'
				tips = `原因：${reason}`
				break
			case 3: text = '终审通过'
				tips = '您已成功成为陪宠师'
				break
			case 4: text = '终审拒绝'
				tips = `原因：${reason}`
				break
			case 5: text = '待终审'
				tips = '陪宠师申请正在终审，请耐心等候'
				break
		}
		return {
			text,
			tips
		}
	}
	//用户协议点击
	const changeAgreement = () => {
		isAgreement.value = !isAgreement.value
	}
	//跳转《陪宠师服务协议》
	const topetTeacherAgreement = () => {

		uni.navigateTo({
			url: '/pages/setting/petTeacherAgreement/index'
		})
	}
	const goUrl = (type) => {
		let url = ''
		switch (type) {
			case 1: url = `/pages/myStudio/studio/applyForDetails/index?id=${applyCheckDetail.value.id}&type=1`
				break
			case 2: url = `/pages/studio/index/index?id=${applyCheckDetail.value.id}`
				break
			case 3: url = `/pages/studio/petCompanionTeacherIndex/index?studioId=${applyCheckDetail.value.id}&userId=${userInfo.value.id}`
				break
		}
		uni.navigateTo({
			url: url
		})
	}
	const applyBtn = async () => {
		if (!userInfo.value) {
			uni.navigateTo({
				url: '/pages/login/index'
			})
			return
		}
		if (!isAgreement.value) {
			uni.showToast({
				title: '请勾选同意协议',
				icon: 'none'
			})
			return
		}
		await applyCheck()
		if (applyCheckDetail.value.type) {
			popupApplyCheckRef.value.open()
			return
		}
		console.log(recordId.value, 'res.data')
		uni.navigateTo({
			url: `/pages/applyPetTeacher/submitInfo/submitInfo?id=${studioId.value}&recordId=${recordId.value}`
		})
		/* if (studioId.value) {
			uni.navigateTo({
				url: `/pages/applyPetTeacher/submitInfo/submitInfo?id=${studioId.value}&recordId=${recordId.value}`
			})
		} else {
			uni.navigateTo({
				url: `/pages/applyPetTeacher/chooseStudio/chooseStudio?recordId=${recordId.value}`
			})
		} */
	}
	const getApplyPetsitter = async () => {
		const res : any = await api({
			method: 'get',
			url: `/mall/content/backend-configs/getHomeConfig`
		})
		if (res) {
			applyPetsitter.value = res.data['xjs.content.contentConfig.applyPetsitterPage']
			console.log(applyPetsitter.value)
		} else {

		}
	}
	const getApplicationRecord = async () => {
		const res : any = await api({
			method: 'GET',
			url: `/mall/studio/apply-studio-record/getLatestRecordsByUserId`
		})
		if (res) {
			applicationRecord.value = res.data
			console.log(applicationRecord.value, '')
			recordId.value = res.data.id

		}
	}
	const applyCheck = async () => {

		const res : any = await api({
			method: 'POST',
			url: `/mall/studio/apply-studio-record/check`
		})
		if (res) {
			applyCheckDetail.value = res.data
			console.log(res.data)
		}
	}
	const getStudio = async (id) => {
		const res : any = await api({
			method: 'get',
			url: `/mall/studio/getStudioDetail/${id}`
		})
		if (res) {
			studioDetail.value = res.data
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-color: #F9F6F6;
		height: 100%;
		box-sizing: border-box;
		padding-bottom: calc(var(--safe-area-bottom) + 186rpx);
	}

	.top_tips {
		width: 100%;
		padding: 32rpx 24rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1rpx solid #E4E6E6;
		box-sizing: border-box;
		line-height: 1;
		background-color: #fff;
		position: sticky;
		top: 0;
		left: 0;

		.tips_left {
			display: flex;
			align-items: center;
			color: #FF6084;

			.tips_hot {
				margin-right: 8rpx;
				padding: 12rpx;
				border: 2rpx solid #FF6084;
				border-radius: 200rpx;
				font-size: 24rpx;
			}

			.tips_text {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				width: 520rpx;
				font-size: 26rpx;
				word-break: break-all;
			}
		}
	}

	.studio_info {

		width: 686rpx;
		margin: 32rpx auto;
		padding: 32rpx;
		display: flex;
		background-color: #fff;
		border-radius: 24rpx;
		box-sizing: border-box;
		line-height: 1;

		.studio_info_img {
			margin-right: 16rpx;
			width: 136rpx;
			height: 136rpx;
			border-radius: 12rpx;
		}

		.studio_info_text {
			color: #1B2120;
			flex: 1;
			line-height: 1;

			.studio_info_text_name {
				margin: 20rpx 0 24rpx 0;
				font-size: 36rpx;
				font-weight: bold;
			}

			.studio_info_text_tips {
				font-size: 30rpx;

			}
		}
	}

	.bottom_box {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #fff;
		padding-bottom: calc(constant(safe-area-inset-bottom));
		padding-bottom: calc(env(safe-area-inset-bottom));
		line-height: 1;

		.bottom_tips {
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1rpx solid #E4E6E6;

			image {
				margin-right: 8rpx;
				width: 40rpx;
				height: 40rpx;
			}

			view {
				font-size: 26rpx;
				color: #7C807F;

				text {
					color: #FF6084;
				}
			}
		}

		.bottom_btn {
			width: 686rpx;
			margin: 8rpx auto;
			padding: 30rpx;
			background: linear-gradient(90deg, #FF6188 0%, #FF5252 100%);
			font-size: 28rpx;
			color: #FFFFFF;
			border-radius: 62rpx;
			text-align: center;
			box-sizing: border-box;
		}
	}

	.example {
		padding: 0 40rpx 60rpx;
		box-sizing: border-box;
		position: relative;
		width: 686rpx;

		.example_title {
			text-align: center;
			font-weight: bold;
			padding: 40rpx 0 80rpx;
		}

		.close {
			position: absolute;
			top: 40rpx;
			right: 40rpx;
		}

		.example_title {}

		.example_btn {
			color: #fff;
		}
	}
</style>